import React from 'react';

// 可控组件

export default class kekong extends React.Component{
  constructor(){
    super();
    this.state={
      val:''
    }
  }
  handelChange(e){
    this.setState({
      val:e.target.value
    })
    console.log(this.state.val)
  }
  render(){
    return(
      // 不可控组件
      // <div>
      //   <input type='text' value='Dfei' />
      // </div>


      // 可控组件
      <div>
        <input type='text' placeholder='请输入'  value={this.state.val} onChange={this.handelChange.bind(this)} />
      </div>

      // defaultValue='123'可控组件，最好不要加默认值，会报错
    )
  }
}

/**
 *
 * 可控组件和不可控组件：
 *      在React中的input标签是有些小坑的，input本身就有自己的缓存机制，然后React的State也有缓存机制。这两种缓存机制我们在编码中是要进行取舍的。将input中*      的value绑定到state的React组件就是可控组件，反之则是不可控组件。
 *
 * 这时候你在浏览器中打开的Jspang的值是不可变的，甚至连删除都删除不了，这是由React的渲染策略决定的。如果要写成功能正常和可用性组件，我们需要编写onChange事件，并将value绑定到state中
 *
 *
 * 在情况允许的条件下，我们应该优先考虑编写可控组件。
 *
 *
 *  可控组件的优点  ：
 *    符合React单向数据流特性，即从state流向render输出的结果。
      数据存储在state中，便于访问和处理。
 *
 */
